*{
			margin: 0;
			padding: 0;
		}
	     html, body {
        	position: relative;
        	height: 100%;
        	margin:0;
        	padding: 0;
    	}
    	li{ list-style:none;}
        #main{ 
        	width:100%; 
        	height:100%;
        	 position:relative; 
        	 overflow:hidden;
        	 
        }
		#loading{ 
			width:100%; 
			height:100%;
			 position:absolute; 
			 left:0;
			  top:0; 
			  z-index:20; 
		}
		.swiper-container {
		    width: 100%;
		    height: 100%;
		}
		.swiper-slide {
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: -webkit-flex;
		    display: flex;
		    /*-webkit-box-pack: center;
		        -ms-flex-pack: center;
		        -webkit-justify-content: center;
		        justify-content: center;
		        -webkit-box-align: center;
		        -ms-flex-align: center;
		        -webkit-align-items: center;
		        align-items: center;*/    
		}
		.swiper-slide div{
			width:100%;height:100%;
		}
		#c1 {
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    left: 0;
		    top: 0;
		    z-index: 21;
		}
		#arrow{ 
			width:0.9rem;
			height:0.52rem; 
			background:url(../img/arr.png) no-repeat;
			position:absolute; 
			left:50%; bottom:0.15rem;
			margin-left:-0.45rem; 
			z-index:20;
			animation:1s infinite arrowMove; 
			-webkit-animation:1s infinite arrowMove;}
		@keyframes arrowMove{
			0%{ opacity:0; transform:translate(0,0);}
			50%{ opacity:1; transform:translate(0,-0.3rem);}
			100%{ opacity:0; transform:translate(0,-0.5rem);}
		}

		#music{ 
			width:0.7rem;
			height:0.7rem;
			background:url(../img/music.png) no-repeat; 
			background-size:cover;
			position:absolute;
			top:0.2rem; right:0.2rem; 
			z-index:20;
		}
		#music.active{ 
			animation:1s linear infinite musicMove;
			-webkit-animation:1s linear infinite musicMove;
		}
		@keyframes musicMove{
			0%{ transform:rotate(0);}
			100%{ transform:rotate(360deg);}
		}
		@-webkit-keyframes musicMove{
			0%{ -webkit-transform:rotate(0);}
			100%{ -webkit-transform:rotate(360deg);}
		}
		@keyframes cll{
			0%{ opacity:0; transform:translate(-2rem,0);}
			
			100%{ opacity:1; transform:translate(0,0);}
		}
		@keyframes cll2{
			0%{ opacity:0; transform:translate(2rem,0);}
			
			100%{ opacity:1; transform:translate(0,0);}
		}
		@-webkit-keyframes childd{
			0%{ -webkit-transform:rotate(0);left:43%;top:53%}
			100%{ -webkit-transform:rotate(720deg);left: 43%;
			    top: 30%;}
		}
		@-webkit-keyframes child1{
			0%{ -webkit-transform:rotate(0);left:43%;top:53%}
			100%{ -webkit-transform:rotate(720deg);left: 13%;
    			top: 40%;}
		}
		@-webkit-keyframes child2{
			0%{ -webkit-transform:rotate(0);left:43%;top:53%}
			100%{ -webkit-transform:rotate(720deg);left:73%;
				 top:40%;}
		}
		@-webkit-keyframes child3{
			0%{ -webkit-transform:rotate(0);left:43%;top:53%}
			100%{ -webkit-transform:rotate(720deg);left:13%; 
				 top:60%;}
		}
		@-webkit-keyframes child4{
			0%{ -webkit-transform:rotate(0);left:43%;top:53%}
			100%{ -webkit-transform:rotate(720deg);left:73%;
				  top:60%;}
		}
		@-webkit-keyframes child5{
			0%{ -webkit-transform:rotate(0);left:43%;top:53%}
			100%{ -webkit-transform:rotate(720deg);left:43%;
			   top:75%;}
		}
		@-webkit-keyframes li3{
			0%{ -webkit-transform:rotate(0);}
			100%{ -webkit-transform:rotateY(720deg)}
		}
		 .li1Child{ 
			font-size:0.3rem; 
			color:white; 
			position:absolute; 
			left:20%; 
			top:65%;
			z-index: 20;
			}
		.li1Child li{opacity: 0;}
		.swiper-slide-active .li1Child li:nth-of-type(1),.swiper-slide-active .li1Child li:nth-of-type(3){
			animation: cll 1s linear forwards;
			}
			
		.swiper-slide-active .li1Child li:nth-of-type(2),.swiper-slide-active .li1Child li:nth-of-type(4){
			animation: cll2 1s linear forwards;
			}
			.swiper-slide-active .li2Child li:nth-of-type(1){
				animation:childd 1s linear forwards;
			}
			.swiper-slide-active .li2Child li:nth-of-type(2){
				animation:child1 1s linear forwards;
			}
			.swiper-slide-active .li2Child li:nth-of-type(3){
				animation:child2 1s linear forwards;
			}
			.swiper-slide-active .li2Child li:nth-of-type(4){
				animation:child3 1s linear forwards;
			}
			.swiper-slide-active .li2Child li:nth-of-type(5){
				animation:child4 1s linear forwards;
			}
			.swiper-slide-active .li2Child li:nth-of-type(6){
				animation:child5 1s linear forwards;
			}
			
			.li2Child li:nth-of-type(1){
				
				
				background: url(../img/c1.png) no-repeat;
			    
				background-size: 0.9rem 0.9rem;
			}
			.li2Child li:nth-of-type(2){
				
				
				background: url(../img/c2.png) no-repeat;
    			background-size: 0.9rem 0.9rem;
				
			}
			.li2Child li:nth-of-type(3){ 
				background:url(../img/c3.png) no-repeat; 
				background-size: 0.9rem 0.9rem;
				}
			.li2Child li:nth-of-type(4){
				 background:url(../img/c4.png) no-repeat; 
				 background-size: 0.9rem 0.9rem;
				 }
			.li2Child li:nth-of-type(5){
				 background:url(../img/c5.png) no-repeat; 
				 background-size: 0.9rem 0.9rem;
				 }
			 .li2Child li:nth-of-type(6){
			 	 background:url(../img/c6.png) no-repeat;
			 	 background-size: 0.9rem 0.9rem;
			  }
			  .li2Child li{
				width:0.9rem;
				height:0.9rem;
				position: absolute;
				left:43%;top:53%;
			}
			.s3 .li3Child {
			    width: 4.6rem;
			    height: 2.22rem;
			    background: url(../img/d1.png) no-repeat;
			    position: absolute;
			    left: 50%;
			    margin-left: -2.3rem;
			    bottom: 20%;
			    background-size: 4.6rem 2.22rem;
			}
			.swiper-slide-active .li3Child{
				animation:li3 1s linear forwards;
			}
			.li4Child li {
			    color: white;
			    font-size: 0.22rem;
			    border: 2px #FFF solid;
			    border-radius: 5px;
			    box-shadow: 0 0 15px #FFF;
			    word-wrap: break-word;
			    position: absolute;
			    overflow: hidden;
			    padding: 0.05rem;
			    box-sizing: border-box;
			    width:0;
			    height:0;
			}
			@-webkit-keyframes li4c1{
			0%{ width:0;
			    height:0}
			100%{ width: 2rem;
    			height: 2.6rem;}
			}
			@-webkit-keyframes li4c2{
			0%{ width:0;
			    height:0}
			100%{ width: 2.8rem;
    			height: 1.6rem;}
			}
			@-webkit-keyframes li4c3{
			0%{ width:0;
			    height:0}
			100%{ width: 1.1rem;
    			height: 2.9rem;}
			}
			.swiper-slide-active .li4Child li:nth-of-type(1){
				animation:li4c1 1s linear forwards;
			}
			.swiper-slide-active .li4Child li:nth-of-type(2){
				animation:li4c2 1s linear forwards;
			}
			.swiper-slide-active .li4Child li:nth-of-type(3){
				animation:li4c3 1s linear forwards;
			}
			.li4Child li:nth-of-type(1) {
			    left: 4%;
			    top: 14%;
			}
			.li4Child li:nth-of-type(2) {
			    left: 50%;
    			top: 18%;
			}
			.li4Child li:nth-of-type(3) {
			    left: 76%;
    			top: 39%;
			}
			#l_d{
				 width:100%;
				 height:100%; 
				 position:absolute;
				 left:0; 
				 top:0;
				 z-index:22; 
				 background:white;
			}
			#l_d .u_l{
				position:absolute;
				left:50%;
				top:40%;
			    width:0.9rem; 
				margin-left:-0.45rem;}
		    #l_d div{ 
				font-size:0.3rem;
				color:#0F0; 
				width:100%;
				text-align:center;
				top:50%;
				position:absolute;}
		    #l_d .u_l li{ 
		    	width:0.05rem;
		    	height:0.4rem;
		    	margin-right:0.1rem; 
		    	background:#0F0; 
		    	float:left; 
		    	animation:2s linear infinite loadingMove;}
			@keyframes loadingMove{
				0%{ transform:scaleY(1);}
				50%{ transform:scaleY(0.2);}
				100%{ transform:scaleY(1);}
			}
			#l_d .u_l li:nth-of-type(1){ animation-delay:-0s;}
			#l_d .u_l li:nth-of-type(2){ animation-delay:-0.2s;}
			#l_d .u_l li:nth-of-type(3){ animation-delay:-0.4s;}
			#l_d .u_l li:nth-of-type(4){ animation-delay:-0.6s;}
			#l_d .u_l li:nth-of-type(5){ animation-delay:-0.8s;}
			#l_d .u_l li:nth-of-type(6){ animation-delay:-1s;}